import React, { Component } from 'react';

import { Cascader, message } from 'antd';

import { reqCategory } from '../../../../api';

export default class ChooseCategory extends Component {
    state = {
        options: [],
        value: '',
        pCategoryId: this.props.categoryIds.pCategoryId,
        categoryId: this.props.categoryIds.categoryId
    }

    async getCategory(selectedOptions) {
        let id = '0';

        let targetOption = null;
        if (selectedOptions) {
            targetOption = selectedOptions[selectedOptions.length - 1];
            targetOption.loading = true;
            id = targetOption.value;
        }
        const res = await reqCategory(id);

        if (res.status === 0) {
            const { data } = res;

            if (id === '0') {
                const newOptions = data.map((item) => ({
                    value: item._id,
                    label: item.name,
                    isLeaf: false
                }))
                this.setState({
                    options: newOptions
                })
                return Promise.resolve(newOptions);
            } else {
                if (data.length === 0) {
                    targetOption.isLeaf = true;
                } else {
                    targetOption.children = data.map((item) => ({
                        value: item._id,
                        label: item.name,
                        isLeaf: true
                    }));
                }

                targetOption.loading = false;
                const { options } = this.state;
                this.setState({ options: [...options] });
                return Promise.resolve(targetOption);
            }
        } else {
            message.error('获取分类数据失败！');
            return Promise.reject([]);
        }
    }

    saveCategory(val, selectedOptions, setFieldsValue) {
        this.setState({ value: val })
        setFieldsValue({ categoryIds: selectedOptions.map(item => item.value) });
    }

    async loadDefault(pCategoryId, categoryId, setFieldsValue) {
        if (pCategoryId === '0') {
            await this.getCategory();
            setFieldsValue({ categoryIds: [categoryId] });
            this.setState({ value: [categoryId] });
        } else {
            const options = await this.getCategory();
            const targetOption = await this.getCategory([{ value: pCategoryId }]);

            options.find(item => {
                if (item.value === targetOption.value) {
                    item.children = targetOption.children;
                    return true;
                }
                return false;
            });
            setFieldsValue({ categoryIds: [pCategoryId, categoryId] });
            this.setState({ value: [pCategoryId, categoryId] });
        }
    }

    componentDidMount() {
        const { pCategoryId, categoryId } = this.state;
        const { setFieldsValue } = this.props;
        if (pCategoryId && categoryId) {
            this.loadDefault(pCategoryId, categoryId, setFieldsValue);
        } else {
            this.getCategory();
        }
    }

    render() {
        const { options, value } = this.state;
        const { setFieldsValue } = this.props;

        return (
            <Cascader
                options={options}
                onChange={(value, selectedOptions) => this.saveCategory(value, selectedOptions, setFieldsValue)}
                loadData={(selectedOptions) => this.getCategory(selectedOptions)}
                className="input"
                placeholder="请选择分类"
                value={value}
                changeOnSelect
            />
        )
    }
}
